<!--
 * @Author: 涵崽
 * @Date: 2024-03-01 16:52:50
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2024-03-05 12:38:27
 * @Description: 微信：1045654
-->
<template>
  <div>
    <!-- 分页 -->
    <el-card style="margin: 20px">
      <h-pagination
        :total.sync="total"
        :page.sync="page"
        :limit.sync="limit"
      />
    </el-card>
    <!-- 按钮 -->
    <el-card style="margin: 20px">
      <h-button @click.native="test">
        <span
          v-show="activePopShow"
        >点击关闭弹窗</span>
        <span
          v-show="!activePopShow"
        >点击打开弹窗</span>
      </h-button>
    </el-card>
    <!-- 日期选择器 -->
    <el-card style="margin: 20px">
      <h-datepicker :time.sync="time" />
    </el-card>

    <!-- 对话框 -->
    <h-dialog
      ref="childComponent"
      :show.sync="activePopShow"
    >
      <span>你好</span>
      <div slot="title">这是title</div>
      <div slot="footer">
        <h-button @click.native="close">
          <span>点击关闭弹窗</span>
        </h-button>
      </div>
    </h-dialog>

    <!-- 图片上传 -->
    <el-card style="margin: 20px">
      <h-upload
        :image-url.sync="imageUrl"
        :action="action"
        type="size"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      init: this.init
    }
  },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 100,
      time: '',
      activePopShow: true,
      imageUrl: '',
      action: ''
    }
  },
  methods: {
    init() {
      // 发送请求
      console.log('分页器更新了，我要去发请求了')
    },
    test() {
      console.log('按钮被点击了')
      this.activePopShow = !this.activePopShow
    },
    close() {
      this.activePopShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 50px;
  background-color: #67c23a;
  line-height: 50px;
  color: #fff;
  text-align: center;
}
</style>
